<template>
  <div ref="box"  class="box">
    <div class="selection" ref="selection">
    <div class="title">{{ String(new Date()).slice(4, 11) }}今日精选</div>
    <div class="list-card">
      <ul class="list">
        <li
          v-for="(item, i) in list"
          :key="i"
          @click="toVideo(item.children[0].model.resource.id)"
        >
          <div class="top">
            <div class="top-left">
              <img
                v-lazy="item.children[0].model.resource.author?.userinfo.avatar"
                alt=""
              />
              <span>{{
                item.children[0].model.resource.author?.userinfo.username
              }}</span>
              <img
                src="https://oss-xpc0.xpccdn.com/Upload/edu/2019/09/055d70f8a79a45b.png"
                alt=""
                class="vip"
                v-show="
                  item.children[0].model.resource.author?.userinfo.vip_flag ===
                  1
                "
              />
            </div>
            <div class="top-right">
              <div class="action">+ 关注</div>
              <van-icon name="ellipsis" />
            </div>
          </div>
          <div class="center">
            <h5>{{ item.children[0].model.resource.title }}</h5>
            <div class="video-content">
              <video
                :data-flag=item.flag
                 muted="true"
                class="video"
                :src=item.backupUrl
                :poster="item.children[0].model.resource.cover"
                @click.stop="getVideo(item.children[0].model.resource.media_id,i)"
                :key="i"
              ></video>
            </div>
          </div>
          <div class="bottom">
            <div class="bottom-left">
              <van-icon name="like-o" size="16" color="#000" />
              <span>{{
                item.children[0].model.resource.count.count_like
              }}</span>
              <van-icon name="comment-o" size="16" color="#000" />
              <span>{{
                item.children[0].model.resource.count.count_comment
              }}</span>
              <van-icon name="star-o" size="16" color="#000" />
              <span>{{
                item.children[0].model.resource.count.count_collect
              }}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
</template>
  <script>
import axios from "axios";
import VueAxios from "vue-axios";
import myVideo from "../components/videoPlay.vue";
export default {
  components: {
    myVideo,
  },
  data() {
    return {
      list: [],
     
    };
  },
  methods: {
    async getMustSeeList() {
      const res = await axios.get(
        "https://apis.netstart.cn/xpc/home/selection"
      );
      this.list = res.data.data.children.slice(1);
      
      this.list.forEach(
        (item)=>{
          item.flag=false
          item.backupUrl=""
        }
      )
    },
    toVideo(id) {
      this.$router.push({
        path: "/Video",
        query: { id: id },
      });
    },
    async getVideo(mediaId,i) {
      console.log(1);
      console.log(mediaId);
     await axios({
        method: "get",
        url: `https://apis.netstart.cn/xpc/media/${mediaId}`,
      }).then((res) => {
        this.list[i].backupUrl = res.data.data.resource.progressive[0].backupUrl;
        this.list[i].flag = true;
      this.list = JSON.parse(JSON.stringify(this.list))
        console.log(this.list);
      });
    },
    scroll(){
      this.$refs.box.addEventListener('scroll',()=>{
        let videoList =document.querySelectorAll(".video")
        videoList.forEach((item,i)=>{
          if(item.backupUrl!=""&&item.dataset.flag){
          if(item.getBoundingClientRect().top<window.innerHeight-80&&item.getBoundingClientRect().top>=80){
           this.$nextTick(()=>{
            item.play()
           })
          }else{
            this.$nextTick(()=>{
            item.pause()
           })
          }
        }
        })
      })
    }
  },
  mounted() {
    this.getMustSeeList();
    this.scroll()
  },
};
</script>
  <style lang="scss">
    .box{
      height: 100vh;
      overflow-y: auto;
    }
.title {
  padding: 2.6232vw;
  margin-left: 20px;
  font-size: 30px;
  font-weight: bold;
  background-color: #f4f4f4;
}
.list-card {
  padding-bottom: 60px;
  .list {
    padding: 2.6232vw;
    padding-top: 0;
    background: #f4f4f4;
    li {
      background: #fff;
      border-radius: 15px;
      margin-bottom: 20px;
      overflow: hidden;
    }

    .top {
      display: flex;
      justify-content: space-between;
      padding: 2.4155vw 2.4144vw 1vw 2.4vw;
      align-items: center;
      .top-left {
        display: flex;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 5px;
          margin-left: 8px;
        }
        span {
          margin-left: 10px;
        }
      }
      .top-right {
        display: flex;
        align-items: center;
        div {
          color: #d65644;
        }
        .van-icon {
          transform: rotate(90deg);
          margin-left: 25px;
        }
      }
    }
    .center {
      h5 {
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 0 2.4155vw;
        margin-left: 25px;
      }
      .img-box {
        img {
          width: 100%;
          height: 340px;
        }
      }
    }
    .bottom {
      width: 100%;
      padding: 15px 0;
      .bottom-left {
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 20px;
        .van-icon {
          left: 9.333vw;
        }
        span {
          margin-left: 10px;
          flex-grow: 1;
        }
      }
    }
  }
}
.video-content {
  width: 100%;
  video {
    width: 100%;
    height: 48.667vw;
    object-fit: fill”;
  }
}
</style>